import { useCallback, useEffect, useState } from 'react'
import { postCompanyInfoDetailInvestInvestSpaceInv } from '@/api/companyDetail/CompanyDevelopment.ts'
import CompanyList from './DetailCompanyList.tsx'
import SpaceMap from './SpaceMap.tsx'
import { initPageType, usePageChange } from '@hs-admin/utils'
import './spaceLayout.css'
import { Pagination } from 'antd'
import { useLocation } from 'react-router-dom'

const initPage: initPageType = {
  current: 1,
  total: 0,
  pageSize: 5,
  morePageOptions: {
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total: number) => `共 ${total} 条数据`,
    pageSizeOptions: [5]
  }
}
const tabsList = ['投资公司', '分支机构']

const SpaceLayout = ({ defaultModule = '投资公司', companyCode }: { defaultModule?: string; companyCode: string }) => {
  const [count1, setCount1] = useState(0)
  const [count2, setCount2] = useState(0)
  const [activeValue, setActiveValue] = useState(defaultModule)
  const [searchType, setSearchType] = useState(1)
  const [showModal, setShowModal] = useState(false)
  const location = useLocation()

  const [listData, setListData] = useState([])

  const handleClick = async (item: string) => {
    setActiveValue(item)
    setSearchType(item === '投资公司' ? 1 : 2)
  }

  useEffect(() => {
    console.log('location', location.hash)
  }, [location])

  const doRequest = useCallback(
    async (page: number, pageSize: number) => {
      const res = await postCompanyInfoDetailInvestInvestSpaceInv({
        pageNo: page,
        current: page,
        pageSize: pageSize,
        companyCode,
        searchType
      })
      setListData(
        res.list?.map((item, index) => {
          item._index = index + (page - 1) * pageSize + 1
          return item
        }) ?? []
      )
      searchType === 1 ? setCount1(res.total) : setCount2(res.total)
      return res.total ?? 0
    },
    [companyCode, searchType]
  )

  const { pagination, resetPageAndTriggerRequest } = usePageChange(initPage, doRequest)

  useEffect(() => {
    resetPageAndTriggerRequest()
  }, [resetPageAndTriggerRequest])

  useEffect(() => {
    const fetchModalState = async () => {
      const [q1, q2] = await Promise.all([
        postCompanyInfoDetailInvestInvestSpaceInv({ searchType: 1 }),
        postCompanyInfoDetailInvestInvestSpaceInv({ searchType: 2 })
      ])
      const combinedList = q1.list?.concat(q2.list)
      setShowModal(combinedList?.length > 0)
    }

    fetchModalState()
  }, [])

  return (
    <>
      {showModal ? (
        <div className="space-layout" id="投资布局">
          <div className="space-layout-title">空间布局</div>
          <ul className="space-layout-tabs-list">
            {tabsList.map((item, index) => (
              // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
              <li
                id={item}
                key={index}
                data-count={item === '投资公司' ? count1 : count2}
                className={`space-layout-tabs-item ${activeValue === item ? 'is-active' : ''}`}
                onClick={() => handleClick(item)}>
                {item}
              </li>
            ))}
          </ul>
          <div className="flex w-1160px">
            <div className="map-container" style={{ width: '50%' }}>
              <SpaceMap companyList={listData} />
            </div>
            <div className="company-list" style={{ width: '50%' }}>
              <CompanyList companyData={listData} />
              {pagination.total ? (
                <div className="page-footer">
                  <Pagination {...pagination} />
                </div>
              ) : null}
            </div>
          </div>
        </div>
      ) : null}
    </>
  )
}

export default SpaceLayout
